<template>
  <div id="gazellefiled"></div>
</template>

<script>
import * as echarts from "echarts";
import { getComForFiled } from "@/api/info.js";

export default {
  name: "GazelleFiledChart",
  data() {
    return {
      filedList: [
        // { industry: "计算机", number: 39 },
        // { industry: "其他制造", number: 24 },
        // { industry: "软件和信息", number: 22 },
        // { industry: "研究和试验", number: 13 },
      ],
    };
  },
  async mounted() {
    await this.getInfo();
    this.initCazellefiled();
  },
  methods: {
    async getInfo() {
      let res = await getComForFiled();
      if (res.code === 200) {
        this.filedList = res.data;
      }
    },
    initCazellefiled() {
      var myChart = echarts.init(
        document.getElementById("gazellefiled"),
        null,
        {
          width: 380,
          height: 360,
        }
      );
      let option = {
        dataset: {
          dimensions: ["industry", "number"],
          source: this.filedList,
        },
        title: {
          text: "江西瞪羚企业领域分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
        },
        xAxis: {
          type: "category",
          axisTick: {
            length: 2,
          },
          lineStyle: {
            width: 1,
          },
          axisLabel: {
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 2; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "领域分布",
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              formatter: function (params) {
                return params.value.value;
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style>
</style>